<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="result.css">
</head>

<body>

    
    <div class="template">
        <link rel="stylesheet" href="./index-78d201b8-6aa0-4abb-ae40-ba3baab194ac.css">

<div class="container" data-78d201b8-6aa0-4abb-ae40-ba3baab194ac>
    <svg class="chart" data-78d201b8-6aa0-4abb-ae40-ba3baab194ac></svg>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/d3/6.7.0/d3.min.js"></script>
<script>
    const xPorname = 'x'
    const yPorname = 'y'

    const data = [{"x":"小明","y":1},{"x":"b","y":2},{"x":"c","y":3},{"x":"d","y":4}]

    const svg = d3.select('svg.chart')
    const svgRect = svg.node().getBoundingClientRect()
    const x = d3.scaleBand()
        .domain(data.map(v => v[xPorname]))
        .range([0, svgRect.width])
        .padding(0.2)

    const y = d3.scaleLinear().domain([0, d3.max(data.map(v => v[yPorname]))]).range([svgRect.height, 0])

    svg.append('g').attr('class', 'x-axis')
        .attr('transform', `translate(0,${svgRect.height})`)
        .call(d3.axisBottom(x))

    svg.append('g').attr('class', 'y-axis')
        .call(d3.axisLeft(y))

    svg.append('g').attr('class', 'data')
        .selectAll('.bar').data(data).join('rect')
        .attr('class', 'bar')
        .attr('x', d => x(d.x))
        .attr('y', d => y(d.y))
        .attr('height', d => svgRect.height - y(d.y))
        .attr('width', d => x.bandwidth())
</script>
    </div>
    
</body>

</html>